<template>
  <div class="container">
    <uv-navbar bgColor="#f7f7f7" title="" placeholder>
      <template v-slot:left>
        <view class="uv-nav-slot flex alignCenter">
          <uv-icon name="arrow-left" size="21" bold @click="proxy.$utils.back()"></uv-icon>
          <uv-tabs :scrollable="false" :current="current" :list="tabs" @click="tabsClick" lineColor="#B087F2" :activeStyle="activeStyle"></uv-tabs>
        </view>
      </template>
    </uv-navbar>
    <view class="list">
      <view @click="toLink('/packagePages/user/friendApplyDetails',item)" class="item flex alignCenter justifyBetween" v-for="(item,index) in list" :key="index">
        <uv-avatar :src="item.userInfo.avatarUrl" mode="aspectFill" size="60"></uv-avatar>
        <view class="user">
          <view class="info">
            <view class="flex alignCenter justifyBetween width100">
              <view class="name bold">{{item.userInfo.nickname}}</view>
              <view class="time fz12">{{proxy.$utils.dateTimeFormateFn(item.createdAt,"all")}}</view>
            </view>
            <!-- 1=未处理2=同意3=拒绝 -->
            <view class="fz12 see" v-if="item.status == 1">等待{{current==0?null:"对方"}}查看</view>
            <view class="fz12 see" v-else-if="item.status == 2">已通过</view>
            <view class="fz12 see" v-else>已拒绝</view>
          </view>
        </view>
      </view>
    </view>

    <uv-empty mode="data" v-if="list.length == 0"></uv-empty>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();

import YeIMStore from "@/stores/YeIM";
const YeIM = YeIMStore();

let activeStyle = computed(() => {
  return {
    color: "#B087F2",
  };
});
let page = 1;
let list = ref([]);

let tabs = ref([
  { name: "申请我的", value: 0 },
  { name: "我申请的", value: 1 },
]);
let current = ref(0);

onLoad(() => {
  init();
});

function tabsClick(e) {
  current.value = e.index;
  init();
}

function init() {
  list.value = [];
  page = 1;
  getInfo();
}

async function getInfo() {
  let resp = await YeIM.getFriendApplyList(
    page,
    tabs.value[current.value].value
  );
  let arr = resp.data.records;
  if (arr.length) {
    list.value = proxy.$utils.filterArr([...list.value], arr, "id");
  }
  console.log("resp", list.value);
}

function toLink(path, row) {
  let url = proxy.$utils.buildUrl(path, {
    userId: tabs.value[current.value].value == 1 ? row.userId : row.applyUserId,
    remark: row.remark,
    type: tabs.value[current.value].value,
  });
  proxy.$utils.toLink(url);
}
</script>



<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f7f7f7;
  .list {
    padding: 15px;
    .item {
      padding: 10px;
      border-radius: 10px;
      background-color: #fff;
      margin-bottom: 10px;
      .user {
        width: 100%;
        margin-left: 10px;
        .time {
          color: #b3b2bb;
        }
        .see {
          color: #98979e;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>



